import React from 'react'
import { Input } from '../components/common/Input'
import { EqualCompareTypeSelector } from '../components/common/equalCompareTypeSelector'
import basicStyle from '../components/common/basic.scss'
import { EqualToBaseEnvCompareType } from './equalToBaseEnvCompareType'
import { YOrNSelector } from '../components/common/yOrNSelector'
import { renderEditorOfElementWithExtSelector, renderLogOfElementWithExtSelector } from '../components/common/elementWithExtSelector'

const getEqualToBaseEnvCompareType = equalCompareType => {
    const compareType = EqualToBaseEnvCompareType[equalCompareType]
    if (compareType) {
        return compareType
    } else {
        throw `not support compareType: ${compareType}, all known compareTypes: ${Object.keys(EqualToBaseEnvCompareType).join(', ')}`
    }
}

export const AssertTypes = {
    textContentContains: {
        title: '文本包含',
        requireBaseEnv: false,
        renderEditor: (params) => {
            const { index, data, readOnly, onChangeField } = params
            const { text = '' } = data

            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                    文本：<Input className='width_150px' value={text} placeholder='文本值' type='text' onChange={text => onChangeField(index, 'text', text)} readOnly={readOnly} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result, valid }) => {
            const { expected, actual = '' } = result

            return <div className={basicStyle.log_entry}>
                断言{renderLogOfElementWithExtSelector({ data })}文本包含"{expected}"<span>{valid ? '' : `, 实际: "${actual}"`}</span>
            </div>
        },
        getRefIdMap: (data) => {
            const { elementSelectorId } = data
            return { ajax: 0, mock: 0, element: elementSelectorId }
        },
    },
    textContentEqualTo: {
        title: '文本等于',
        requireBaseEnv: false,
        renderEditor: (params) => {
            const { index, data, readOnly, onChangeField } = params
            const { text = '' } = data

            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                    文本：<Input className='width_150px' value={text} placeholder='文本值' type='text' onChange={text => onChangeField(index, 'text', text)} readOnly={readOnly} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result, valid }) => {
            const { expected, actual = '' } = result

            return <div className={basicStyle.log_entry}>
                断言{renderLogOfElementWithExtSelector({ data })}文本等于"{expected}"<span>{valid ? '' : `，实际："${actual}"`}</span>
            </div>
        },
        getRefIdMap: (data) => {
            const { elementSelectorId } = data
            return { ajax: 0, mock: 0, element: elementSelectorId }
        },
    },
    networkRequestParamsEqualTo: {
        title: '网络请求参数等于',
        requireBaseEnv: false,
        renderEditor: (params) => {
            return EqualToBaseEnvCompareType.network.renderEditor(params)
        },
        renderLog: ({ data, result }) => {
            return EqualToBaseEnvCompareType.network.renderLog(data, result)
        },
        getRefIdMap: (data) => {
            return EqualToBaseEnvCompareType.network.getRefIdMap(data)
        },
    },
    ifElementExist: {
        title: '元素是否存在',
        requireBaseEnv: false,
        renderEditor: (params) => {
            const { index, data, readOnly, onChangeField } = params
            const { existElement = '' } = data

            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                    是否存在：<YOrNSelector inputClassName='width_80px' initValue={existElement}
                        onSelectItem={item => onChangeField(index, 'existElement', item.code)} yText='存在' nText='不存在' readOnly={readOnly} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result }) => {
            const { expected, actual } = result
            const getIfExistText = exist => (exist === 'Y') ? '存在' : '不存在'

            return <div className={basicStyle.log_entry}>
                断言{renderLogOfElementWithExtSelector({ data })}{getIfExistText(expected)}<span>, 实际: "{getIfExistText(actual)}"</span>
            </div>
        },
        getRefIdMap: (data) => {
            const { elementSelectorId } = data
            return { ajax: 0, mock: 0, element: elementSelectorId }
        },
    },
    ifElementVisible: {
        title: '元素是否可见',
        requireBaseEnv: false,
        renderEditor: (params) => {
            const { index, data, readOnly, onChangeField } = params
            const { elementIsVisible = '' } = data

            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                    是否可见：<YOrNSelector inputClassName='width_80px' initValue={elementIsVisible}
                        onSelectItem={item => onChangeField(index, 'elementIsVisible', item.code)} yText='可见' nText='不可见' readOnly={readOnly} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result }) => {
            const { expected, actual } = result
            const getIfExistVisible = exist => (exist === 'Y') ? '可见' : '不可见'

            return <div className={basicStyle.log_entry}>
                断言{renderLogOfElementWithExtSelector({ data })}{getIfExistVisible(expected)}<span>, 实际: "{getIfExistVisible(actual)}"</span>
            </div>
        },
        getRefIdMap: (data) => {
            const { elementSelectorId } = data
            return { ajax: 0, mock: 0, element: elementSelectorId }
        },
    },
    equalToBaseEnv: {
        title: '与基准环境相等',
        requireBaseEnv: true,
        renderEditor: ({ index, data, readOnly, onChangeField }) => {
            const { equalCompareType = '' } = data

            return (
                <React.Fragment>
                    比较类型：<EqualCompareTypeSelector initValue={equalCompareType} onSelectItem={element => onChangeField(index, 'equalCompareType', element.name)} readOnly={readOnly} />
                    {equalCompareType && getEqualToBaseEnvCompareType(equalCompareType).renderEditor({ index, data, readOnly, onChangeField })}
                    <span className={basicStyle.require} title='与基准环境运行结果比较'>*</span>
                </React.Fragment>
            )
        },
        renderLog: (params) => {
            const { data } = params
            const { equalCompareType } = data

            return getEqualToBaseEnvCompareType(equalCompareType).renderLog(params)
        },
        renderWholeLog: ({ data, result }) => {
            const { equalCompareType } = data
            return getEqualToBaseEnvCompareType(equalCompareType).renderWholeLog
        },
        getRefIdMap: (data) => {
            const { equalCompareType } = data

            return getEqualToBaseEnvCompareType(equalCompareType).getRefIdMap(data)
        },
    }
}

export class AssertTypeProvider {
    static getAllAssertTypes() {
        return Object
            .keys(AssertTypes)
            .map(key => ({
                ...AssertTypes[key],
                code: key
            }))
    }
}